//2d canvas based text rendering

var doll = (function(_doll) {

    _doll.text = _doll.text || {};

    _doll.text.init = function () {
        _doll.view.append('<canvas id="text" width="1000", height="50" ></canvas>');
        _doll.text.text_view = _doll.document.getElementById('text');
        $('#text').hide();
        var ctx = _doll.text.text_view.getContext('2d');
        var test = 'Hello there!';
        var abc = 'abcdefghijklmnopqrstuvwxyz0123456789';
        _doll.text.offset = {x:0, y:0};
        _doll.text.offset.x = ctx.canvas.width * 0.5;
        _doll.text.offset.y = ctx.canvas.height * 0.5;
        
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = 'white';
        ctx.lineWidth = 5;
        ctx.font = 'bold 44px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(abc, _doll.text.offset.x, _doll.text.offset.y);
        
        //_doll.text.texture = new THREE.DataTexture(_doll.text.text_view);
        
        //_doll.text.texture = new THREE.ImageUtils.loadTexture('assets/image/test.jpg' );
        
        var image = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
        _doll.text.texture = new THREE.ImageUtils.generateDataTexture(ctx.canvas.width, ctx.canvas.height, 0xffffff);
        _doll.text.texture.image.data = new Uint8Array(image.data.buffer,0);
        //_doll.text.texture.image.data = _doll.text.text_view;
        _doll.text.texture.format = THREE.RGBAFormat;
        _doll.text.texture.type = THREE.UnsignedByteType;
        _doll.text.texture.needsUpdate = true;

        _doll.text.ctx = ctx;
        var mesh = new THREE.Mesh(
            new THREE.PlaneGeometry(ctx.canvas.width,ctx.canvas.height,ctx.canvas.width,ctx.canvas.height),
            new THREE.MeshBasicMaterial(
                {color:0xffffff
                 , map:_doll.text.texture
                }));
        mesh.position.set(200,200,0);

        scene.add(mesh);
    }

    _doll.text.make_tex = function (text, style) {
        var s = {
            bg: 'black',
            fg: 'white',
            face: 'bold',
            size: '44px',
            font: 'Arial',
            line_width: 5,
            align: 'center',
            baseline: 'middle'
        }

        _doll.set_options(s, style);
        
        ctx.fillStyle = s.bg;
        ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = s.fg;
        ctx.lineWidth = s.line_width;
        ctx.font = s.face + ' ' + s.size + ' ' + s.font;
        ctx.textAlign = s.align;
        ctx.textBaseline = s.baseline;

        ctx.fillText(text, _doll.text.offset.x, _doll.text.offset.y);
        
        var image = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
        var tex = new THREE.ImageUtils.generateDataTexture(ctx.canvas.width, ctx.canvas.height, 0xffffff);
        tex.image.data = new Uint8Array(image.data.buffer,0);
        tex.format = THREE.RGBAFormat;
        tex.type = THREE.UnsignedByteType;
        tex.needsUpdate = true;
        
        return tex;
    }

    return _doll;
}(doll || {}));

